<template>
  <div class="info-1200 selloffer-detail-content">
          <div class="wy-main-title wy-m-t-40">
                <p>
                      <span><nuxt-link to="./../info/index">首页</nuxt-link></span>
                      <span>  / 跨境物流   </span>
                      <span>/ 物流详情</span>
                </p>
          </div>
           <!-- 配送详情 -->
          <div class="tender-detail">
              <div class="tender-city">
                  <div class="wei_ciy_top">
                    <h3>云南省昆明市——北京市市辖区</h3>
                    <p><span>距离：</span><span class="wei_city_long">2293km</span><span class="wei_city_span">发布时间：2019-04-21 5:30:21</span><span>浏览量:12次</span></p>
                  </div>
                  <!-- 商品展示 -->
  
         <!-- 货源信息 -->

             <!--  <div class="goods-part" v-for="(item,index) in detail.cargos" :key="index">
                  <div class="goods-change-pic">
                        <img :src="item.cargoPics">
                  </div>
                  <div class="goods-changePic-detail">
                      <p>货物名称：<span>{{item.cargoTitle}}</span></p>
                      <p>货物类型：<span>{{item.carType}}</span></p>
                      <p>货物体积：<span>{{item.volume}}</span></p>
                      <p>货物重量：<span><i>{{item.weight}}</i>{{item.weightUnit}}</span></p>
                      <p>货物简介：<span>{{item.comment}}</span></p>
                  </div>
              </div> -->

                  <div class="tend-list-sell wei_tend-list-sell">
                    <div class="ant-list ant-list-vertical ant-list-lg ant-list-split">
                      <div class="ant-spin-nested-loading">
                        <div class="ant-spin-container">
                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">出发地</div>
                              <div class="Infor-cont">云南省昆明市</div></div>
                          </div>

                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">到达地</div>
                              <div class="Infor-cont">北京市市辖区</div></div>
                          </div>
                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">联系人</div>
                              <div class="Infor-cont">王丽荣</div></div>
                          </div>
                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">联系电话</div>
                              <div class="Infor-cont">18842380213</div></div>
                          </div>
                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">运输方式</div>
                              <div class="Infor-cont">水运</div></div>
                          </div>
 
                          </div>
                      </div>
                    </div>
                  </div>
                  <div class="wei_tips"><span>*</span>
                            温馨提示：联系我时，请说明是从云南国际物流云上看到的信息，谢谢
                        </div>

                                  <!-- 线路说明 -->
                  <div class="tender-company-profile">
                            <div class="tnder-main-title" style="margin-top:40px;">线路说明
                            </div>
                            <div class="company-profile-content">
                                    <p style="text-align:justify"> 
                            昆明代理有限公司是一家综合性的物流公司，一直以来致力于国际、国内大宗货物的运输业务，提供快递,空运，海运，进口以及物流配套方面的服务.我司与世界著名国际快递公司:DHL、UPS、FEDEX、TNT建立长期的合作关系；同时与国内著名的航空公司:UPS、
CZ、CA、AK、SQ、EK等航空公司有着长期的合作关系，充分利用这些全球著名的国际速递与空运公司的服务网络和服务优势，为客户提供快捷、安全的全方位服务。公司有一批经过专门训练，有着丰富物流经验的高素质从业人员，能够根据不同的客户需求，在最短的时间内为客户量身设计出最适合的物流方案，并能流畅地将方案付诸实施，客户提供快捷、安全的全方位服务。公司有一批经过专门训练，有着丰富物流经验的高素质从业人员，能够根据不同的客户需求，在昆明代理有限公司是一家综合性的物流公司，一直以来致力于国际、国内大宗货物的运输业务，提供快递,空运，海运，进口以及物流......

配套方面的服务.我司与世界著名国际快递公司:DHL、UPS、FEDEX、TNT建立长期的合作关系；同时与国内著名的航空公司:UPS、

CZ、CA、AK、SQ、EK等航空公司有着长期的合作关系，充分利用这些全球著名的国际速递与空运公司的服务网络和服务优势，为

客户提供快捷、安全的全方位服务。公司有一批经过专门训练，有着丰富物流经验的高素质从业人员，能够根据不同的客户需求，在

最短的时间内为客户量身设计出最适合的物流方案，并能流畅地将方案付诸实施。

最短的时间内为客户量身设计出最适合的物流方案，并能流畅地将方案付诸实施。......
                        </p>
                            </div>
                  </div>
               

                  <!-- 公司简介 -->
                  <div class="tender-company-profile">
                            <div class="tnder-main-title">公司简介
                                  <nuxt-link :to="`./../../corp`">进入企业主页</nuxt-link>
                            </div>
                            <div class="company-profile-content">
                                    <p style="text-align:justify">昆明代理有限公司是一家综合性的物流公司，一直以来致力于国际、国内大宗货物的运输业务，提供快递,空运，海运，进口以及物流配套方面的服务.我司与世界著名国际快递公司:DHL、UPS、FEDEX、TNT建立长期的合作关系；同时与国内著名的航空公司:UPS、CZ、CA、AK、SQ、EK等航空公司有着长期的合作关系，充分利用这些全球著名的国际速递与空运公司的服务网络和服务优势，为客户提供快捷、安全的全方位服务。公司有一批经过专门训练，有着丰富物流经验的高素质从业人员，能够根据不同的客户需求，在最短的时间内为客户量身设计出最适合的物流方案，并能流畅地将方案付诸实施。一直以来致力于国际、国内大宗货物的运输业务，提供快递,空运海运，进口以及物流配套方面的服务.我司与世界著名国际快递公司:DHL、UPS、FEDEX、TNT建立长期的合作关系；同时与国内著名的航空公司:UPS、CZ、CA、AK、SQ、EK等航空公司有着长期的合作关系，充分利用这些全球著名的国际速递与空运公司的服务网络和服务优势......客户提供快捷、安全的全方位服务。公司有一批经过专门训练，有着丰富物流经验的高素质从业人员，能够根据不同的客户需求，在最短的时间内为客户量身设计出最适合的物流方案，并能流畅地将方案付诸实施......</p>
                            </div>
                  </div>
                   <div class="wei_btn">
                     <a-button v-if="loggedIn" type="primary" @click="elasticShowModal(detail.userId)">立即沟通</a-button>
                  </div>
              </div>
              <div class="tender-concat">
                      <div class="tnder-main-title">联系方式</div>
                      <div class="concat-content">
                          <h3>北京荣之联科技股份有限公司</h3>
                          <div>
                                <span>用户星级</span>
                                <a-rate :defaultValue="2.5" allowHalf />
                          </div>
                      </div>
                      <div class="concat-renzhen">
                           <a-button>已认证</a-button>
                      </div>
                      <!-- 分割线 -->
                      <div class="concat-line"></div>
                      <p>公司地址：北京朝阳IT电子城</p>
                      <p>详细地址：北京朝阳酒仙桥东路10号院5号楼</p>
                      <p>成立时间：2001年6月18日</p>
                      <p>联系人：刘珊珊</p>
                      <div class="tnder-main-title">公司其他跨境信息</div>
                        <ul class="wei_ui_list">
                          <li><a href="javascript:;">中国 昆明-缅甸 仰光</a></li>
                          <li><a href="javascript:;">中国 昆明-缅甸 仰光</a></li>
                          <li><a href="javascript:;">中国 昆明-缅甸 仰光</a></li>
                          <li><a href="javascript:;">中国 昆明-缅甸 仰光</a></li>
                        </ul>
              </div>
          </div>
                <!-- 登录后留言板弹框 -->
      <Elastic :userId="detail.userId"  ref='elastic'></Elastic>
  </div>
</template>

<script>
import { chainData } from './../../../utils/chainData'
import Elastic from '@/components/dialog/Elastic'
import { environment } from './../../../server/environment'
import AuthMixin from '~/mixins/auth'
export default{
   mixins: [ AuthMixin ],
   components: {
    Elastic
  },
  data(){
    return{
      detail: {
        userId:'1'
      },
      datas:[],
      id:'01',
       tagsEvent: '',
        type: '',
        FileUploadUrl2:environment.FileUploadUrl2,
        tagsData: [
             {name:"满意"},
             {name:"货已发出"},
             {name:"电话不通"},
             {name:"货物运输困难"},
             {name:"需求货物押金"},
        ],
        carouselList: [
          {
            img: require('./../../../static/img/transport/avabanner.png')
          },{
            img: require('./../../../static/img/transport/avaBannerSecond.png')
          },{
            img: require('./../../../static/img/transport/avaBannerFirst.png')
          }
         ],
          data:[
          {
            key: '1',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21'
          }, {
            key: '2',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21',
          }, {
            key: '3',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21',
          }, {
            key: '4',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21',
          }, {
            key: '5',
            name: '昆明呈贡区—北京大兴厢式货车',
            carnums: '滇B***45',
            carType: '本地车',
            carLeng: '8米',
            carKio:'20吨',
            carTime:'2019-04-21',
          }
        ],
        columns:[
          {
            title: '车辆信息',
            dataIndex: 'name',
          }, 
          {
            title: '车牌号',
            dataIndex: 'carnums',
          }, 
          {
            title: '车源类型',
            dataIndex: 'carType',
          },
          {
            title: '车厂',
            dataIndex: 'carLeng',
          },
          {
            title: '载重',
            dataIndex: 'carKio',
          },
          {
            title: '发布时间',
            dataIndex: 'carTime',
          },
          {
            title: '查看',
            key: 'operation',
            scopedSlots: { customRender: 'action' },
          }
        ],
    }
  },
  created:function(){
     this.id = this.$route.params.id
    this.datas = chainData.purch;

    chainData.purch.find((item,index)=>{
      if (item.id == this.id) {
        this.detail = item;
      }
    })

       this.datas.length=2;
  },
  methods:{
        // 显示留言板
    elasticShowModal(id){
      this.$refs.elastic.showModal(id);
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./../../../assets/css/chain/Detail.scss";

    .selloffer-detail-content{
     .tender-detail{
      .tender-city{
         .tender-company-profile{
          margin-bottom: 40px;
          
            .ant-btn{
              margin-left: 40%;
              margin-top: 30px;
            }
          
         }
      }
     }
    }
    .wei_mid_img{
      text-align: center;
      img{
        width: 360px;
        height: 180px;
        margin-top: 26px;
      }
    } 

    .selloffer-detail-content{
      .tender-detail{
        .tender-city{
          .wei_ciy_top{
            height: 90px;
            text-align: center;
            h3{
              height:23px;
              font-size:24px;
              line-height: 24px;
              font-weight:500;
              color:rgba(21,131,122,1);
              margin-bottom: 24px;
            }
            p{
              span{
                width:410px;
                height:14px;
                font-size:14px;
                font-weight:400;
                color:rgba(153,153,153,1);
              }
              .wei_city_span{
                margin:0  30px;
              }
              .wei_city_long{
                color: red;
              }
            }
            
          }
          .wei_100{
            width: 100%;
            margin-bottom: 20px;
          }
          .sell-detail-goods{
            height: 280px;
            .goods-pic{
              height: 280px;
            }
          }
        }
      }
    }
    .selloffer-detail-content{
      .tender-detail{
            .wei_tend-list-sell{
              height: 140px;
            }
            .wei_attestaion{
              .wei_att_div{
                  height:60px;
                  line-height:60px;
                  h3{
                    float:left;
                    margin-top:2px;
                    margin-bottom:0;
                    margin-right:43px;
                  }
              }
              .wei_att_p{
                margin-top:13px;
              }

              .attestaion{
                margin-left: 43px;
                width: 80px;
                height: 26px;
                background: #FFA200;
                border-radius: 2px;
                display: inline-block;
                font-size: 12px;
                color: #FFFFFF;
                text-align: center;
                line-height: 26px;
                margin-top:10px;
                 } 
            }
      }
    }

    .wei_tips{
      margin-top: 14px;
      span{
        color: red;
      }
    }
    .wei_btn{
      text-align: center;
      margin-top: 30px;
      margin-bottom: 60px;
    }

    //货源评价
    .goods-sourceEvaluation{
      .goods-sourceDetail{
         width:717px;
           margin:0 auto;
         p{
           font-size:12px;
           color:#666666;
           line-height:13px;
           margin-top:16px;
         }
      }
       .v-tag{
            width:717px;
            margin:0 auto;
            margin-top:25px;
            .ant-tag{
              height:36px;
              border:1px solid rgba(21,131,122,1);
              border-radius:2px;
              font-size:14px;
              color:#15837A;
              text-align:center;
              line-height:36px;
              margin-right:20px;
              padding:0 26px;
            }
            .ant-tag:nth-child(5){
              margin-right:0px;
            }
            textarea{
                width:717px;
                height:120px;
                border:1px solid #D8D8D8;
                border-radius:2px;
                text-indent:2em;
                padding-top:10px;
                font-size:14px;
                color:#999999;
                margin-top:30px;
            }
         }
      .goods-btn-search{
         width:160px;
         height:40px;
         margin:0 auto;
         margin-top:30px;
      }
    }

        //货源信息
    .goods-title-750{
      width:750px;
      height:40px;
      background:#F7F7F7;
      border-bottom:1px solid #D8D8D8;
      font-size:16px;
      color:#15837A;
      line-height:40px;
      padding-left:28px;
      margin-top:40px;
        a{
            font-size:14px;
            color:#15837A;
            float:right;
            margin-right:30px;
         }
    }
    .goods_title_margin{
      margin-top: -80px;
    }
    .v-carList{
      margin-top:30px;
    }
    .v-recommend .ant-table-body a{
          color: #15837A;
    }

          .goods-part{
          width:750px;
        height:236px;
        padding:22px 0;
        border-bottom:1px solid #D8D8D8;
        clear:both;
      }
      //左边轮播切换
        .goods-change-pic{
           width:229px;
           height:194px;
           float:left;
           img{
            width:100%;
            height:100%;
           }
        }
        //右边详情
        .goods-changePic-detail{
          float:left;
          margin-left:30px;
          margin-top:26px;
          width: 480px;
          i{
            font-style:normal;
            color:#FFA200;
            font-size:16px;
          }
          p{
            font-size:14px;
            color:#333333;
          }
        }
        .wei_ui_list{
          li {
            text-indent: 1rem;
            margin-top: 10px;
            a{
              color: #333;
            }
          }
        }
</style>